<template>
    <div>
        <!-- 顶部 -->
         <Center v-if="isshow"/>
        <div class="head headgoods" style="background:#fff">
            <div @click="fn1"><i class="iconfont icon-icon-test1"></i></div>
            <span>标题</span>
            <span  @click="isshow=!isshow"><i class="iconfont icon-diandiandia-copy" ></i></span>
            <!-- 导航 -->
            <div class="nav"  style="background:#fff">
                <ul>
                    <li @click="fn(1)" :class="show==1?'active':''">人气</li>
                    <li @click="fn(2)" :class="show==2?'active':''">折扣</li>
                    <li @click="fn(3)" :class="show==3?'active':''">价格</li>
                    <li></li>
                </ul>
            </div>
        </div>
        
        <!-- 商品详情 -->    
        <div class="list" id="box" ref="mycont">
            <div>
            <div class="list_t_t">
                <p>免运</p>
                <span>满688元全场免运</span>
            </div>
            <div  >
                <div class="goodslist" >
                    <div v-for="(item) in lists" 
                        :key="item.productID"
                    >
                        <div>
                            <!-- <img :src="" alt=""> -->
                        </div>
                    <div>
                            <img :src="item.imageUrl" alt="">
                    </div>
                    
                        <p>{{item.tagListDto.length==0?'':item.tagListDto[0].tag}}</p>
                        <p>{{item.brandName}}</p>
                        <p>{{item.productName}}</p>
                        <div>
                            <span>￥{{item.price}}</span>
                            <span>￥{{item.marketPrice}}</span>
                            <span>{{item.discount}}折</span>
                        </div>
                    </div>
                </div>
            </div>
            </div>
        </div>   
    </div>
   
</template>

<script>
    import BScroll from '@better-scroll/core'
    import Pullup from '@better-scroll/pull-up'
    BScroll.use(Pullup)
    let page = 1;
    import Center from './Center.vue'
    import {getGoodsList} from '../api/goods'
    export default {
        data() {
            return {
                list: [],
                show:1,
                isshow:false,
            }
        },
        components: {
            Center,
        },
        async created () {
            let res= await getGoodsList(page);
            this.list=res.data.products
            // this.list1=res.data.products
            console.log(this.list);
            this.$nextTick(()=>{
                console.log('执行nextTick');
                // setTimeout(()=>{    
                    this.initScroll()
                // },2000)
            })
        },
        
        computed: {
         
            lists() {
                if(this.show==1){
                    return this.list
                }
                if(this.show==2){
                    return this.list.sort(function(a,b){
                        return a.discount-b.discount
                    })
                   
                }
                 if(this.show==3){
                    return this.list.sort(function(a,b){
                        return a.price-b.price
                    })
                   
                }
            }
        },
        methods: {
            fn(a) {
                this.show=a
                // if(a==1){
                //    this.list.sort(function(a,b){
                //         return a.discount-b.discount
                //     })
                // }
                // if(a==2){
                //     this.list.sort(function(a,b){
                //         return a.discount-b.discount
                //     })
                // }
                //  if(a==3){
                //     this.list.sort(function(a,b){
                //         return a.price-b.price
                //     })
                // }
            },
             
            fn1() {
                this.$router.go(-1)
            },
            initScroll () {
                
                let scroll = new BScroll(this.$refs.mycont,{
                    pullUpLoad: true
                })

               
                scroll.on('pullingUp', async() => {
                    page++;
                    console.log(page)
                    let res = await getGoodsList(page)
                    this.list = this.list.concat(res.data.products)
           
                    scroll.finishPullUp()
                    scroll.refresh()
                })
            }
        },
    }
</script>

<style lang="scss" scoped>
@import url(../assets/css/goodslist.css);
@import url(../assets/font_q2zhw7no3h/iconfont.css);
</style>